/** @format */

import { defineComponent, ref } from 'vue'

function getMsg() {
  return '我是·函数·类型的字符串，用{getMsg()}来读取字符'
}

function getComponent() {
  return <div>我是组件</div>
}

const theMsg = ref('我是·变量·类型的字符串，用{theMsg}来读取字符')
export default defineComponent({
  setup() {
    return () => {
      return (
        <div>
          <el-space direction="vertical" alignment="left" size={24}>
            <strong>Tsx 基础使用</strong>
            <div>
              静态字符 - 参考文档
              [https://www.npmjs.com/package/@vue/babel-plugin-jsx]
            </div>
            <div>{theMsg.value}</div>
            <div>{getMsg()}</div>
            <el-input v-model={theMsg.value}></el-input>
            <el-space>
              {' '}
              [组件写法1]： {getComponent()} -- (建议使用写法1)
            </el-space>
            <el-space>
              {' '}
              [组件写法2]： <getComponent />
            </el-space>
          </el-space>
        </div>
      )
    }
  },
})
